<template>
<div class="container">
	<Box caption="个人信息" class="box">
		<el-form :model="personInfo"   ref="personInfo" label-width="100px" class="demo-ruleForm" size="normal">
			<el-form-item label="登录账号" >
				<el-input :value="$store.state.userData.name" placeholder="请输入登录账号" disabled></el-input>
			</el-form-item>
			<el-form-item  label="姓名" prop="name">
				<el-input v-model="personInfo.chineseName" placeholder="请输入姓名" @input="changeStatus" clearable></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phoneNumber" >
				<el-input v-model="personInfo.mobile" placeholder="请输入手机号"  maxlength="11" @input="changeStatus" clearable></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email" >
				<el-input v-model="personInfo.email" placeholder="请确认邮箱" @input="changeStatus" clearable></el-input>
			</el-form-item>
			<el-form-item class="button">
				<el-button type="primary" @click="submitInfo" round>提交</el-button>
				<el-button type="primary" @click="$router.push('/home')" round>返回</el-button>
			</el-form-item>
		</el-form>
	</Box>
</div>
</template>

<script>
import Box from '../../../components/pc/Box'
export default {
  name: "personInfo",
	components:{
  	Box,
	},
	data(){
  	return{
  		// 是否改变
  		isChange:false,
		  // 是否提交
  		isSumbit:false,
  		personInfo:{
  			userName:'',
			  chineseName:'',
			  mobile:'',
			  email:''
		  },
	  }
	},
	async created() {
  	this.isSumbit = false;
  	// 获取信息
		await this.$Http.getInfo({
			id:this.$store.state.userData.id
		}).then(res =>{
			console.log(res);
			// 展现页面
			this.personInfo.userName = res.data.userName;
			this.personInfo.chineseName = res.data.chineseName;
			this.personInfo.mobile = res.data.mobile;
			this.personInfo.email = res.data.email;
		})
	},
	// 路由离开守卫
	beforeRouteLeave(to , from , next){
  	  // 如果已提交或未修改 则可以离开
		if(this.isSumbit || !this.isChange){
			next();
		}else{
			// 如果已修改或未提交 则弹窗提示
			this.changeTips();
			next(false);
		}
	},
	methods:{
		async submitInfo(){
			if(this.verify()){
				let formData = this.$refs['personInfo'].model;
				formData.id = this.$store.state.userData.id;
				await this.$Http.updateInfo(this.$qs.stringify(formData)).then(res =>{
					if (res.code === 'SUCCESS'){
						this.isSumbit = true;
						this.$message({
							message:'修改成功！',
							type:'success'
						});
						this.$store.commit('setChineseName', this.personInfo.chineseName);
						this.$router.push('/home');
					}else {
						this.$message.error(res.message);
					}
				})
			}
		},
		// 校验
		verify(){
			// 检验邮箱
			let rEmail = new RegExp(
					"^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"
			);
			let rMobile = /^1[3|4|5|7|8][0-9]{9}$/;
			if(this.personInfo.chineseName ===""){
				this.$message.error("请填写姓名");
				return false;
			}else if(!rEmail.test(this.personInfo.email)){
				this.$message.error("邮件格式不正确！");
				return false;
			}else if(!rMobile.test(this.personInfo.mobile)){
				this.$message.error("手机号格式不正确！");
				return false;
			}else if (this.personInfo.email === ''){
				this.$message.error("请填写邮件！");
				return false;
			}else if(this.personInfo.mobile === ''){
				this.$message.error("请填写手机号！");
				return false;
			}
			else{
				return true;
			}
		},
		// 修改提醒
		changeTips() {
			this.$confirm('检测到未提交的内容，是否在离开页面前提交修改？', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '提交',
						cancelButtonText: '放弃修改'
					})
					.then(() => {
						// 进行提交
						this.submitInfo();
					})
					.catch(action => {
						// 如何是选择放弃保存并离开页面
						if(action === 'cancel'){
							this.isChange = false;
							this.$router.push('/home');
						};
						this.$message({
							type: 'info',
							message: action === 'cancel'
									? '放弃提交并离开页面'
									: '停留在当前页面'
						})
					});
		},
		// 修改改变状态
		changeStatus(){
			this.isChange =true;
		}
	}
}
</script>

<style scoped lang="scss">
.container{
	.box{
		.el-form{
			width: 30%;
			min-width: 400px;
			margin: 40px auto;
			.el-button{
				margin: 0 20px;
			}
		}
	}

}
</style>
